<template>
  <el-dialog title="修改" :visible.sync="dialogVer" center width="480px" :before-close="handleClose">
    <div class="dialog-box">
      <el-form
        ref="eduForm"
        :rules="edu"
        :model="eduForm"
        label-width="120px"
        label-position="right"
         v-show="type==edu"
      >
        <el-form-item label="时间：" prop="time">
          <div class="block">
            <el-date-picker
              v-model="eduForm.time"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="教育单位：" prop="educationUnit">
          <el-input v-model="eduForm.educationUnit" readonly=""></el-input>
        </el-form-item>
        <el-form-item label="教育程度&专业：" prop="per_occupation">
          <el-input v-model="eduForm.per_occupation" readonly=""></el-input>
        </el-form-item>
        <el-form-item label="来源网站：" prop="url">
          <el-input v-model="eduForm.url"></el-input>
        </el-form-item>
        <el-form-item label="证据：" prop="evidence">
          <el-input v-model="eduForm.evidence"></el-input>
        </el-form-item>
      </el-form>
       <el-form
        ref="workForm"
        :rules="work"
        :model="workForm"
        label-width="120px"
        label-position="right"
         v-show="type==work"
      >
        <el-form-item label="时间：" prop="time">
          <div class="block">
            <el-date-picker
              v-model="workForm.time"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="工作单位：" prop="educationUnit">
          <el-input v-model="workForm.educationUnit" readonly=""></el-input>
        </el-form-item>
        <el-form-item label="职位：" prop="per_occupation">
          <el-input v-model="workForm.per_occupation" readonly=""></el-input>
        </el-form-item>
        <el-form-item label="来源网站：" prop="url">
          <el-input v-model="workForm.url"></el-input>
        </el-form-item>
        <el-form-item label="证据：" prop="evidence">
          <el-input v-model="workForm.evidence"></el-input>
        </el-form-item>
      </el-form>
       <el-form
        ref="trackForm"
        :rules="track"
        :model="trackForm"
        label-width="120px"
        label-position="right"
         v-show="type==track"
      >
        <el-form-item label="时间：" prop="time">
          <div class="block">
            <el-date-picker
              v-model="trackForm.time"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="地点：" prop="trackName">
          <el-input v-model="trackForm.trackName" readonly=""></el-input>
        </el-form-item>
        <el-form-item label="相关人：" prop="other">
          <el-input v-model="trackForm.other" readonly=""></el-input>
        </el-form-item>
        <el-form-item label="活动详情：" prop="describe">
          <el-input v-model="trackForm.describe" readonly=""></el-input>
        </el-form-item>
        <el-form-item label="来源网站：" prop="url">
          <el-input v-model="trackForm.url"></el-input>
        </el-form-item>
        <el-form-item label="证据：" prop="evidence">
          <el-input v-model="trackForm.evidence"></el-input>
        </el-form-item>
      </el-form>
      <div class="btn-box">
        <el-button type="primary" @click="handleChangeRat" class="save">确定</el-button>
        <el-button class="close" @click="handleClose">取消</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    type:{
      type: String,
      default: 'edu',
    },
    itemData: {
      type: Object,
      default() {
        return {};
      },
    },
    dialogVer: {
      type: Boolean,
      default: false,
    },
  },
  watch:{
    itemData(nVal){
      if(this.type == 'edu'){
        this.eduForm = Object.assign(this.eduForm,nVal)
      }else if(this.type == 'work'){
        this.workForm = Object.assign(this.workForm,nVal)
      }else if(this.type == 'track'){
        this.trackForm = Object.assign(this.trackForm,nVal)
      }
    }
  },
  data() {
    return {
      eduForm: {
        time: "",
        educationUnit: "",
        per_occupation: "",
        url:"",
        evidence:""
      },
      edu: {
        per_occupation: [
          { required: true, message: "教育程度&专业不能为空", trigger: "blur" },
        ],
      },
      workForm: {
        time: "",
        workUnit: "",
        per_occupation: "",
        url:"",
        evidence:""
      },
      work: {
        per_occupation: [
          { required: true, message: "职位不能为空", trigger: "blur" },
        ],
      },
      trackForm: {
        time: "",
        trackName: "",
        other: "",
        describe: "",
        url:"",
        evidence:""
      },
      track: {
        trackName: [
          { required: true, message: "地点不能为空", trigger: "blur" },
        ],
        describe: [
          { required: true, message: "活动详情不能为空", trigger: "blur" },
        ],
      },
    };
  },
  created(){
    console.log(this.itemData)
  },
  methods:{
    handlePageNum(){
      this.$emit('handlePageNum',1)
    },
    handleClose(){
       this.$emit('handleClose',false)
    },
    handleChangeRat(){
      let name = this.getFormName()
      this.$refs[name].validate((valid) => {
          if (valid) {
            this.$emit('handleChangeRat',{newVal:{...this[name]},oldVal:this.itemData})
          } else {
            console.log('参数错误，请重新填写!!');
            return false;
          }
        });
    },
    getFormName(){
      let formName;
      let type = this.type
      if(type == 'edu'){
        formName = eduFrom
      }else if(type == 'work'){
         formName = workFrom
      }else if(type == 'track'){
         formName = trackFrom
      }
      return formName
    }
  }
};
</script>

<style lang="scss" scoped>
.dialog-box{
   .dia-ul {
     min-height:50px;
     max-height:600px;
     overflow-y: auto;
     .item {
       display:block;
       .txt{
         font-size:14px;
         color:#B8BECC;
         line-height:22px;
         margin-bottom:10px;
       }
       .href{
         font-size:14px;
         color:#737780;
         line-height:22px;
       }
     }
   }
   .btn-box{
     text-align:center;
   }
}

</style>
